<template>
  <div>
    精确建库
    <el-row>
      <el-col v-for="item in menuList" :span="4" :offset="1" :key="item.title">
        <el-card :body-style="{ padding: '0px' }">
          <img src="../assets/pic1.png" class="image">
          <div style="padding: 14px;">
            <span>{{item.desc}}</span>
            <div class="bottom clearfix">
              <el-button type="text" v-on:click="addTabs(item.title, item.key)">{{item.title}}</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      menuList: [{title: '单网页采集', key: '1-6-1', desc: '获取单个页面上指定的内容'},
        {title: '表格采集', key: '1-6-2', desc: '获取页面上table中的内容'},
        {title: '列表及详情采集', key: '1-6-3', desc: '获取连续规则页面上的内容'},
        {title: 'URL列表采集', key: '1-6-4', desc: '获取多个url页面中的数据'}]
    }
  },
  methods: {
    addTabs (title, key) {
      this.$store.dispatch('addTab', {'tab': {
        title: title,
        name: key,
//          content: '<proxy></proxy>',
//          proxy: true,
        components: key,
        closed: true
      },
        'activeName': key})
    }
  }
}
</script>
